<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于spark的气象分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 强制所有容器占满宽度 */
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden; /* 干掉默认滚动条，按需开 */
        }
        /* 找到左侧导航和右侧内容的父容器（比如 .container 或 #app） */
        .container {
            max-width: none!important;
            width: 100%!important;
            height: 100%;
            display: flex;
        }
        /* 右侧内容区（如果是 iframe 或主面板） */
        .main-content {
            flex: 1; /* 占满剩余宽度 */
            width: calc(100% - 200px);
            /* 比如左侧导航宽200px，就写 calc(100% - 200px) */
        }

        body {
            display: flex;
            flex-direction: column;
            background-color: #f0f7ff; /* 浅蓝色背景 */
        }

        .top-bar {
            background-color: #165DFF;
            color: white;
            padding: 14px 24px;
            font-weight: 600;
            font-size: 1.3rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 10;
        }


        .sidebar {
            width: 220px;
            background-color: #ffffff;
            border-right: 1px solid #d1e0f7;
            transition: all 0.3s ease;
            box-shadow: 1px 0 3px rgba(22, 93, 255, 0.05);
        }

        .sidebar a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 24px;
            color: #165DFF;
            text-decoration: none;
            border-left: 3px solid transparent;
            transition: all 0.2s ease;
            font-size: 1rem;
        }

        .sidebar a:hover {
            background-color: #e8f0fe;
            padding-left: 26px;
        }

        .sidebar a.active {
            background-color: #e8f0fe;
            color: #165DFF;
            border-left: 3px solid #165DFF;
            font-weight: 500;
        }

        .content {
            flex: 1;
            height: 100%; /* 确保内容区占满高度 */
            overflow: hidden; /* 隐藏内容区滚动 */
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
            transition: opacity 0.3s ease;
        }

        /* 加载动画效果 */
        iframe[src]:not([src=""]) {
            opacity: 1;
        }

        iframe[src=""] {
            opacity: 0;
        }
    </style>
</head>
<body>
<div class="top-bar">基于spark的气象分析系统</div>
<div class="container">
    <div class="sidebar">
        <a href="javascript:loadPage('chart.html')" class="active">气象图表</a>
        <a href="javascript:loadPage('Agri.html')">农业气象</a>
        <a href="javascript:loadPage('predict.html')">异常预测</a>
        <a href="javascript:loadPage('WeatherHourly.html')">查询、增加天气数据</a>
        <!-- 其他子页面... -->
    </div>
    <div class="content">
        <iframe id="mainFrame" src="chart.html"></iframe>
    </div>
</div>

<script>
    function loadPage(url) {
        const iframe = document.getElementById('mainFrame');

        // 加载前短暂隐藏，创建过渡效果
        iframe.style.opacity = '0';

        // 延迟加载以显示过渡效果
        setTimeout(() => {
            iframe.src = url;

            // 加载完成后显示
            iframe.onload = () => {
                iframe.style.opacity = '1';
            };
        }, 150);

        // 更新导航激活状态
        const links = document.querySelectorAll('.sidebar a');
        links.forEach(link => {
            if (link.getAttribute('href') === `javascript:loadPage('${url}')`) {
                link.classList.add('active');
            } else {
                link.classList.remove('active');
            }
        });
    }

    // 初始加载默认页面
    window.onload = () => loadPage('chart.html');
</script>
</body>
</html>
